<template>
  <div class="material-main">
    <el-card class="card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="search.title" size="small" placeholder="标题模糊查询"></el-input>
        </el-col>
        <el-col :span="6" :offset="12">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
          <el-button type="default" size="small" @click="doResetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="content">
      <el-card class="card">
        <div slot="header">
          <el-upload
            class="btn-upload"
            action="/admin/xy/upload/uploadImg"
            :on-success="handleSucee"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <MyPagination :page="page" @page-current-change="handleCurrentChange"></MyPagination>
        <el-row :gutter="30">
          <el-col class="img-block" :span="6" v-for="m in imgList" :key="m.id">
            <el-card shadow="hover">
              <el-image
                @click="showBig(Url.host+'/'+m.dir+'/'+m.fileName)"
                style="width: 90%; height: 300px"
                :src="Url.host+'/'+m.dir+'/'+m.fileName"
                fit="contain"
              ></el-image>
              <div class="tool-bar" v-show="m.id != editId">
                <el-tooltip class="item" effect="dark" content="点击编辑" placement="top">
                  <span
                    @click="goEdit(m.id,$event)"
                    class="title"
                    :class="{unnamed:!m.title}"
                  >{{m.title?m.title:'未定义'}}</span>
                </el-tooltip>
                <span class="size">{{m.size+'b'}}</span>
                <el-button
                  type="text"
                  @click="delImg(m.id)"
                  style="color:#F56C6C"
                  size="mini"
                  icon="el-icon-delete"
                >删除</el-button>
              </div>
              <el-input
                @keyup.esc.native="cancleSave"
                @keyup.enter.native="updateTitle(m.id,m.title)"
                v-show="m.id == editId"
                v-model="m.title"
                size="small"
                placeholder="输入标题,enter保存,esc取消"
              ></el-input>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-dialog :visible.sync="dialog" width="50%" @close="closeDialog">
      <img style="max-width: 100%;" v-if="showImg" :src="showImg" alt />
    </el-dialog>
  </div>
</template>

<script>
import materialApi from "@/api/content/material";
import MyPagination from "@/components/common/Pagination";
import pageMixin from "@/mixins/pageMixin";
import Url from "@/api/config";
import _ from "lodash";
import { resetData } from "@/utils/index";
export default {
  name: "Material",
  mixins: [pageMixin],
  components: {
    MyPagination
  },
  data() {
    return {
      Url,
      dialog: false,
      search: {},
      imgList: [],
      editId: "", //标识哪个被编辑
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24, 36]
      },
      showImg: ""
    };
  },
  created() {
    this.getImgList();
  },
  methods: {
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      };
      params = _.pickBy(params, item => item);
      console.log(this.search);
      console.log(params);

      materialApi.getImgList(params).then(({ data }) => {
        this.imgList = data.list;
        this.page.start = data.pageNumber;
        this.page.limit = data.pageSize;
        this.page.total = data.totalRow;
      });
    },
    handleSucee() {
      //成功后刷新列表
      this.getImgList();
    },
    doSearch() {
      resetData(this, "page");
      this.getImgList();
    },
    doResetSearch() {
      resetData(this, "search");
      this.getImgList();
    },
    delImg(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          materialApi
            .delImg({
              id
            })
            .then(res => {
              if (res.code) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getImgList();
              } else {
                this.$message.error("删除失败!");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    goEdit(id, e) {
      this.editId = id;
      // 确保双向响应完毕 dom显示出来 才能进行dom操作
      this.$nextTick(() => {
        //获取目标元素
        var target = e.target;
        var inputEl = target.parentNode.nextElementSibling.children[0];
        inputEl.focus();
        console.log(inputEl);
      });
    },
    cancleSave() {
      this.editId = "";
    },
    updateTitle(id, title) {
      materialApi
        .updateTitle({
          id,
          title
        })
        .then(res => {
          if (res.code) {
            this.$message.success("更新成功");
            this.editId = "";
            this.getImgList();
          } else {
            this.$message.error("更新失败!");
          }
        });
    },
    showBig(img) {
      this.dialog = true;
      this.showImg = img;
    },
    closeDialog() {
      this.dialog = false;
      this.showImg = "";
    },
    handleCurrentChange(v) {
      console.log("v", v);
      this.page.start = v;
      this.getImgList();
    }
  },
  directives: {
    focus: {
      inserted: function(el) {
        console.log(el);
        // 聚焦元素
        el.focus();
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.material-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
    ::v-deep .el-card__body {
      text-align: center;
    }
  }
  .content {
    .img-block {
      margin: 20px auto;
      height: 400px;
      .tool-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .title {
          font-size: 14px;
          color: #333;
          &.unnamed {
            color: #909399;
          }
        }
        .size {
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
}
</style>
